<template>
  <div>
    <n-space vertical class="p-3">
      <n-button type="error" @click="turnRole()">改变权限集合</n-button>

      <a> 当前角色集合:{{ userStore.getRoleList }}  </a>

      <n-divider title-placement="left">
        指令方式控制
      </n-divider>
      <n-button v-auth="['1000']">权限集为1000</n-button>
      <n-button v-auth="['2000']">权限集为2000</n-button>
      <n-button v-auth="['3000']">权限集为3000</n-button>
      <n-button v-auth="['4000']">权限集为4000</n-button>
      <n-button v-auth="['5000']">权限集为5000</n-button>
      <n-button v-auth="['6000']">权限集为6000</n-button>

      <n-divider title-placement="left">
        组件方式控制
      </n-divider>

      <Authority :value="['1000']">
        <n-button type="primary" class="mx-4"> 拥有1000权限可见 </n-button>
      </Authority>
      <Authority :value="['4000']">
        <n-button type="primary" class="mx-4"> 拥有4000权限可见 </n-button>
      </Authority>

      <n-divider title-placement="left">函数方式控制
      </n-divider>

      <n-button v-if="hasPermission(['1000'])" type="primary" class="mx-4">
        拥有1000权限可见
      </n-button>

      <n-button v-if="hasPermission(['4000'])" type="success" class="mx-4">
        拥有4000权限可见
      </n-button>

      <n-button v-if="hasPermission(['1000','4000'])" type="error" class="mx-4">
        拥有1000,4000角色权限可见
      </n-button>
    </n-space>
  </div>

</template>
<script lang="ts">
  import { computed, defineComponent } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import { RoleEnum } from '@/enums/roleEnum';
  import { usePermission } from '@/hooks/web/usePermission';
  export default defineComponent({
    setup() {
      const { changePermission,hasPermission } = usePermission();
      const userStore = useUserStore();
        function turnRole(){
        if(userStore.getRoleList.includes(RoleEnum.ADMIN)){
          // 获取权限集合
          changePermission(["4000","5000","6000",])
          userStore.setRoleList([RoleEnum.NORMAL])
        }else{
          changePermission(["1000","2000","3000",])
          userStore.setRoleList([RoleEnum.ADMIN])
        }
      }
      return {
        userStore,
        RoleEnum,
        turnRole,
        changePermission,
        hasPermission
      };
    },
  });
</script>
<style lang="less" scoped>

</style>
